<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HSLA制作配色表</title>
	<style>
		.table-wrap {
			width: 400px;
			margin: 10px;
			float: left;
		}
		table {
			width:400px;
			border: 1px solid #756c6c;
			border-left: none;
			border-collapse: collapse;
			border-spacing: 0;
		}
		th,
		td {
			border-top: 1px solid #756c6c;
			border-left: 1px solid #756c6c;
			padding: 10px;
			text-align: center;
			vertical-align: middle;
		}
		/*h=0 s=50% l=50%*/
		tbody tr:nth-child(1) td:nth-of-type(1) {
			background: hsla(0,50%,50%,1);
		}
		tbody tr:nth-child(1) td:nth-of-type(2) {
			background: hsla(0,50%,50%,.8);
		}
		tbody tr:nth-child(1) td:nth-of-type(3) {
			background: hsla(0,50%,50%,.6);
		}
		tbody tr:nth-child(1) td:nth-of-type(4) {
			background: hsla(0,50%,50%,.4);
		}
		tbody tr:nth-child(1) td:nth-of-type(5) {
			background: hsla(0,50%,50%,.2);
		}
		tbody tr:nth-child(1) td:nth-of-type(6) {
			background: hsla(0,50%,50%,0);
		}
		tbody tr:nth-child(1) td:nth-of-type(1) {
			background: hsla(0,50%,50%,1);
		}
		tbody tr:nth-child(1) td:nth-of-type(2) {
			background: hsla(0,50%,50%,.8);
		}
		tbody tr:nth-child(1) td:nth-of-type(3) {
			background: hsla(0,50%,50%,.6);
		}
		tbody tr:nth-child(1) td:nth-of-type(4) {
			background: hsla(0,50%,50%,.4);
		}
		tbody tr:nth-child(1) td:nth-of-type(5) {
			background: hsla(0,50%,50%,.2);
		}
		tbody tr:nth-child(1) td:nth-of-type(6) {
			background: hsla(0,50%,50%,0);
		}
		
		/*h=60 s=50% l=50%*/
		tbody tr:nth-child(2) td:nth-of-type(1) {
			background: hsla(60,50%,50%,1);
		}
		tbody tr:nth-child(2) td:nth-of-type(2) {
			background: hsla(60,50%,50%,.8);
		}
		tbody tr:nth-child(2) td:nth-of-type(3) {
			background: hsla(60,50%,50%,.6);
		}
		tbody tr:nth-child(2) td:nth-of-type(4) {
			background: hsla(60,50%,50%,.4);
		}
		tbody tr:nth-child(2) td:nth-of-type(5) {
			background: hsla(60,50%,50%,.2);
		}
		tbody tr:nth-child(2) td:nth-of-type(6) {
			background: hsla(60,50%,50%,0);
		}
		tbody tr:nth-child(2) td:nth-of-type(1) {
			background: hsla(60,50%,50%,1);
		}
		tbody tr:nth-child(2) td:nth-of-type(2) {
			background: hsla(60,50%,50%,.8);
		}
		tbody tr:nth-child(2) td:nth-of-type(3) {
			background: hsla(60,50%,50%,.6);
		}
		tbody tr:nth-child(2) td:nth-of-type(4) {
			background: hsla(60,50%,50%,.4);
		}
		tbody tr:nth-child(2) td:nth-of-type(5) {
			background: hsla(60,50%,50%,.2);
		}
		tbody tr:nth-child(2) td:nth-of-type(6) {
			background: hsla(60,50%,50%,0);
		}
		/*h=120 s=50% l=50%*/
		tbody tr:nth-child(3) td:nth-of-type(1) {
			background: hsla(120,50%,50%,1);
		}
		tbody tr:nth-child(3) td:nth-of-type(2) {
			background: hsla(120,50%,50%,.8);
		}
		tbody tr:nth-child(3) td:nth-of-type(3) {
			background: hsla(120,50%,50%,.6);
		}
		tbody tr:nth-child(3) td:nth-of-type(4) {
			background: hsla(120,50%,50%,.4);
		}
		tbody tr:nth-child(3) td:nth-of-type(5) {
			background: hsla(120,50%,50%,.2);
		}
		tbody tr:nth-child(3) td:nth-of-type(6) {
			background: hsla(120,50%,50%,0);
		}
		tbody tr:nth-child(3) td:nth-of-type(1) {
			background: hsla(120,50%,50%,1);
		}
		tbody tr:nth-child(3) td:nth-of-type(2) {
			background: hsla(120,50%,50%,.8);
		}
		tbody tr:nth-child(3) td:nth-of-type(3) {
			background: hsla(120,50%,50%,.6);
		}
		tbody tr:nth-child(3) td:nth-of-type(4) {
			background: hsla(120,50%,50%,.4);
		}
		tbody tr:nth-child(3) td:nth-of-type(5) {
			background: hsla(120,50%,50%,.2);
		}
		tbody tr:nth-child(3) td:nth-of-type(6) {
			background: hsla(120,50%,50%,0);
		}
		/*h=180 s=50% l=50%*/
		tbody tr:nth-child(4) td:nth-of-type(1) {
			background: hsla(180,50%,50%,1);
		}
		tbody tr:nth-child(4) td:nth-of-type(2) {
			background: hsla(180,50%,50%,.8);
		}
		tbody tr:nth-child(4) td:nth-of-type(3) {
			background: hsla(180,50%,50%,.6);
		}
		tbody tr:nth-child(4) td:nth-of-type(4) {
			background: hsla(180,50%,50%,.4);
		}
		tbody tr:nth-child(4) td:nth-of-type(5) {
			background: hsla(180,50%,50%,.2);
		}
		tbody tr:nth-child(4) td:nth-of-type(6) {
			background: hsla(180,50%,50%,0);
		}
		tbody tr:nth-child(4) td:nth-of-type(1) {
			background: hsla(180,50%,50%,1);
		}
		tbody tr:nth-child(4) td:nth-of-type(2) {
			background: hsla(180,50%,50%,.8);
		}
		tbody tr:nth-child(4) td:nth-of-type(3) {
			background: hsla(180,50%,50%,.6);
		}
		tbody tr:nth-child(4) td:nth-of-type(4) {
			background: hsla(180,50%,50%,.4);
		}
		tbody tr:nth-child(4) td:nth-of-type(5) {
			background: hsla(180,50%,50%,.2);
		}
		tbody tr:nth-child(4) td:nth-of-type(6) {
			background: hsla(180,50%,50%,0);
		}
		/*h=240 s=50% l=50%*/
		tbody tr:nth-child(5) td:nth-of-type(1) {
			background: hsla(240,50%,50%,1);
		}
		tbody tr:nth-child(5) td:nth-of-type(2) {
			background: hsla(240,50%,50%,.8);
		}
		tbody tr:nth-child(5) td:nth-of-type(3) {
			background: hsla(240,50%,50%,.6);
		}
		tbody tr:nth-child(5) td:nth-of-type(4) {
			background: hsla(240,50%,50%,.4);
		}
		tbody tr:nth-child(5) td:nth-of-type(5) {
			background: hsla(240,50%,50%,.2);
		}
		tbody tr:nth-child(5) td:nth-of-type(6) {
			background: hsla(240,50%,50%,0);
		}
		tbody tr:nth-child(5) td:nth-of-type(1) {
			background: hsla(240,50%,50%,1);
		}
		tbody tr:nth-child(5) td:nth-of-type(2) {
			background: hsla(240,50%,50%,.8);
		}
		tbody tr:nth-child(5) td:nth-of-type(3) {
			background: hsla(240,50%,50%,.6);
		}
		tbody tr:nth-child(5) td:nth-of-type(4) {
			background: hsla(240,50%,50%,.4);
		}
		tbody tr:nth-child(5) td:nth-of-type(5) {
			background: hsla(240,50%,50%,.2);
		}
		tbody tr:nth-child(5) td:nth-of-type(6) {
			background: hsla(240,50%,50%,0);
		}
		/*h=300 s=50% l=50%*/
		tbody tr:nth-child(6) td:nth-of-type(1) {
			background: hsla(300,50%,50%,1);
		}
		tbody tr:nth-child(6) td:nth-of-type(2) {
			background: hsla(300,50%,50%,.8);
		}
		tbody tr:nth-child(6) td:nth-of-type(3) {
			background: hsla(300,50%,50%,.6);
		}
		tbody tr:nth-child(6) td:nth-of-type(4) {
			background: hsla(300,50%,50%,.4);
		}
		tbody tr:nth-child(6) td:nth-of-type(5) {
			background: hsla(300,50%,50%,.2);
		}
		tbody tr:nth-child(6) td:nth-of-type(6) {
			background: hsla(300,50%,50%,0);
		}
		tbody tr:nth-child(6) td:nth-of-type(1) {
			background: hsla(300,50%,50%,1);
		}
		tbody tr:nth-child(6) td:nth-of-type(2) {
			background: hsla(300,50%,50%,.8);
		}
		tbody tr:nth-child(6) td:nth-of-type(3) {
			background: hsla(300,50%,50%,.6);
		}
		tbody tr:nth-child(6) td:nth-of-type(4) {
			background: hsla(300,50%,50%,.4);
		}
		tbody tr:nth-child(6) td:nth-of-type(5) {
			background: hsla(300,50%,50%,.2);
		}
		tbody tr:nth-child(6) td:nth-of-type(6) {
			background: hsla(300,50%,50%,0);
		}
		/*h=360 s=50% l=50%*/
		tbody tr:nth-child(7) td:nth-of-type(1) {
			background: hsla(360,50%,50%,1);
		}
		tbody tr:nth-child(7) td:nth-of-type(2) {
			background: hsla(360,50%,50%,.8);
		}
		tbody tr:nth-child(7) td:nth-of-type(3) {
			background: hsla(360,50%,50%,.6);
		}
		tbody tr:nth-child(7) td:nth-of-type(4) {
			background: hsla(360,50%,50%,.4);
		}
		tbody tr:nth-child(7) td:nth-of-type(5) {
			background: hsla(360,50%,50%,.2);
		}
		tbody tr:nth-child(7) td:nth-of-type(6) {
			background: hsla(360,50%,50%,0);
		}
		tbody tr:nth-child(7) td:nth-of-type(1) {
			background: hsla(360,50%,50%,1);
		}
		tbody tr:nth-child(7) td:nth-of-type(2) {
			background: hsla(360,50%,50%,.8);
		}
		tbody tr:nth-child(7) td:nth-of-type(3) {
			background: hsla(360,50%,50%,.6);
		}
		tbody tr:nth-child(7) td:nth-of-type(4) {
			background: hsla(360,50%,50%,.4);
		}
		tbody tr:nth-child(7) td:nth-of-type(5) {
			background: hsla(360,50%,50%,.2);
		}
		tbody tr:nth-child(7) td:nth-of-type(6) {
			background: hsla(360,50%,50%,0);
		}
	</style>
</head>
<body>

	<table>
		<caption>HSLA制作透明过渡色块</caption>
		<thead>
			<tr>
				<th colspan="7">透明度</th>
			</tr>
			<tr>
				<th>色度</th>
				<th>1</th>
				<th>0.8</th>
				<th>0.6</th>
				<th>0.4</th>
				<th>0.2</th>
				<th>0</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>0</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>60</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>120</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>180</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>240</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>300</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>360</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>	


</body>
</html>